import React,{useState,useEffect} from 'react'
import { getList } from './api/index'
import { Space, Table, Tag } from 'antd';
import Head from './components/Head';

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
function App() {
  //声明的空数组
  const [data,setdata]=useState([]);
  const [value,setValue]=useState('');
  const [selectionType, setSelectionType] = useState('checkbox');
  //删除事件
  const deldata=(text,record,index)=>{
    console.log(text.id)
   
   let newDate=data.filter((item,index)=>{
      if(item.id!=text.id){
        return item
      }
    });
    console.log(newDate)
     setdata(newDate)
  }

  //这是表格头部数据模拟
  const columns = [
    {
      title: '规则名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '描述',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '服务调用次数',
      dataIndex: 'num',
      key: 'num',
      sorter: (a, b) => a.num - b.num,
    },
    {
      title: '状态',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '时间',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: 'Action',
      key: 'action',
      render: (text,record,index) => (
        <Space size="middle">
          <span>编辑</span>
          <span onClick={()=> deldata(text,record,index) }>删除</span>
        </Space>
      ),
    },
  ];
  //搜索数据
  const search=()=>{
    console.log('input框',value)
    let newData=data.filter(item =>{
     if(item.name.includes(value)){
       return true
     }
     return false
    })
    console.log(newData)
    setdata(newData)
  }
  
  //生命周期 请求数据
  useEffect(()=>{
     (async()=>{
            let newdata = await getList()
            console.log(newdata.data);
            setdata(newdata.data)
      })()

  },[])

  let mobel={
    value,
    setValue,
    search
  }

  return (
    <div>
      <Head {...mobel}></Head>
      {
       data&&  <Table columns={columns} dataSource={data} rowKey={record =>record.id} rowSelection={{
        type: selectionType,
        ...rowSelection,
      }}/>
      }
    </div>
  )
}

export default App


